<template>
	<view class="m-approveList">


		<view v-if="!isEmpty">
			<view class="part" v-for="approvalRow in approvalList" style="margin-bottom: 10px;">
				<view class="pf">
					<view class="label">流程</view>
					<view class="pd">
						<view>
							<view class="flex-box f-r">
								<view class="mark1 npd">
									<view class="line1">
										<view>
											<view class="dis-ib">
												<view class="img1">
													<text>{{ approvalRow.approvalNodeList[0].node[0].Creater }}</text>
													<image style="width: 14px; height: 14px;margin-right: 4px;"
														class="sf" src="/uni_modules/mc-ui/static/image/success.png">
													</image>
												</view>
											</view>
										</view>
										<view class="line-li1"></view>
									</view>

								</view>
								<view class="flex-main npd">
									<view>
										<view>
											<text>发起审批</text>
											<text
												class="ap-d">{{approvalRow.approvalNodeList[0].node[0].CreateTime.split('.')[0].replace(/T/g,'')}}</text>
										</view>
										<view class="f-sub">
											{{ approvalRow.approvalNodeList[0].node[0].Creater }}
										</view>
									</view>
									<view class="pl"></view>
								</view>
							</view>
						</view>
						<view v-for="(row,index) in approvalRow.approvalNodeList">
							<view class="flex-box f-r" v-if="row.node[0].ApprovalSort!=0">
								<view class="mark1 npd">
									<view class="line1">
										<view>
											<view class="dis-ib">
												<view class="img1">
													<text
														v-if="row.node.length == 1 && row.node[0].CurrentApprovalIDs.length == 1 && row.type == 0">{{row.node[0].CurrentApprovalIDs[0]}}</text>

													<uni-icons v-else-if="row.type == 1" type="sound" size="28"
														color="#fff" style="padding-top: 7px;"></uni-icons>


													<uni-icons v-else type="staff" size="28" color="#fff"
														style="padding-top: 7px;"></uni-icons>

													<image style="width: 14px; height: 14px;margin-right: 4px;"
														class="sf"
														v-if="approvalRow.level == row.index - 2 && row.type == 1 && row.node[0].Approve != 0"
														src="/uni_modules/mc-ui/static/image/success.png"></image>
													<image style="width: 14px; height: 14px;margin-right: 4px;"
														class="sf" v-if="approvalRow.level >= row.index - 1"
														:src="getApprovalTagImg(row)"></image>
												</view>
											</view>
										</view>
										<view class="line-li1" v-if="index != approvalRow.approvalNodeList.length - 1">
										</view>
									</view>

								</view>
								<view class="flex-main npd">
									<view>
										<view>
											<view class="x-bc">
												<view class="x-f">

													<text style="vertical-align: middle;"
														v-if="row.type == 1">抄送人</text>
													<text style="vertical-align: middle;"
														v-else>{{row.department?row.department:'审批人'}}</text>
													<view>
														<u-icon name="more-circle-fill" color="#afd6ff" size="20"
															@click="showMore(row)"
															style="vertical-align: middle;padding-left: 5px;"></u-icon>
													</view>
												</view>


												<text class="ap-d"
													v-if="approvalRow.level == row.index - 2 && row.type == 1 && row.node[0].Approve != 0">{{row.node[0].ApproveTime}}</text>
												<text class="ap-d"
													v-if="approvalRow.level >= row.index - 1">{{row.node[0].ApproveTime}}</text>
											</view>

											<view class="f-sub" v-if="row.showMore">
												<text
													v-if="row.node.length == 1 && row.node[0].CurrentApprovalIDs.length == 1">{{row.node[0].CurrentApprovalIDs[0]}}</text>
												<text
													v-if="row.node.length == 1 && row.node[0].CurrentApprovalIDs.length > 1 && row.type == 0">{{row.node[0].CurrentApprovalIDs.length}}人或签</text>
												<text
													v-if="row.node.length > 1 && row.type == 0">{{row.node.length}}人会签</text>
												<text
													v-if="row.node.length > 1 && !checkIsSingle(row) && row.type == 0">多人审核</text>
												<text
													v-if="approvalRow.level == row.index - 2 && row.type == 1 && row.node[0].Approve != 0">（已抄送）</text>
												<text
													v-if="approvalRow.level >= row.index - 1">（{{getApprovalText(row)}}）</text>
											</view>
										</view>
										<view class="hq" v-if="row.showMore">
											<!-- 或签 -->
											<view class="wh"
												v-if="row.node.length == 1 && row.node[0].CurrentApprovalIDs.length > 1">
												<view class="dis2-ib"
													v-for="(item,itemIndex) in row.node[0].CurrentApprovalIDs">
													<view class="dis-ib">
														<view class="img">
															<text>{{cutStr(item)}}</text>
															<image style="width: 14px; height: 14px;margin-right: 4px;"
																class="sf"
																v-if="item == row.node[0].Approver && approvalRow.level >= row.index - 1 && row.node[0].Approve != 0"
																:src="row.node[0].Approve == 1?'/uni_modules/mc-ui/static/image/success.png':'/uni_modules/mc-ui/static/image/fail.png'">
															</image>
														</view>
														<view class="ap-n">{{item}}</view>
													</view>
													<view class="dis3-ib"
														v-if="itemIndex != row.node[0].CurrentApprovalIDs.length - 1 && row.type == 0">
														/</view>
													<view class="dis3-ib" v-if="row.type == 1"> </view>
												</view>

											</view>
											<!-- 会签 -->
											<view class="wh" v-if="row.node.length > 1 && checkIsSingle(row)">
												<view class="dis2-ib" v-for="(item,itemIndex) in row.node">
													<view class="dis-ib">
														<view class="img">
															<text>{{cutStr(item.CurrentApprovalIDs[0])}}</text>
															<image style="width: 14px; height: 14px;margin-right: 4px;"
																class="sf"
																v-if="item.Approver && item.Approver == item.CurrentApprovalIDs[0] && approvalRow.level >= row.index - 1 && item.Approve != 0"
																:src="item.Approve == 1?'/uni_modules/mc-ui/static/image/success.png':'/uni_modules/mc-ui/static/image/fail.png'">
															</image>
														</view>
														<view class="ap-n">{{item.CurrentApprovalIDs[0]}}
														</view>
													</view>
													<view class="dis3-ib"
														v-if="itemIndex != row.node.length - 1 && (row.type == 0 || row.type == 1)">
														+</view>
													<!-- <view class="dis3-ib" v-if="row.type == 1"> </view> -->
												</view>

											</view>
											<!-- 多人审核 -->
											<view class="wh" v-if="row.node.length > 1 && !checkIsSingle(row)">
												<view class="dis2-ib" v-for="(item,itemIndex) in row.node">
													<view class="dis2-ib"
														v-for="(detail,detailIndex) in item.CurrentApprovalIDs">
														<view class="dis-ib">
															<view class="img">
																<text>{{cutStr(detail)}}</text>
															</view>
															<view class="ap-n">{{detail}}
															</view>
														</view>
														<view class="dis3-ib" v-if="itemIndex != row.node.length - 1">/
														</view>
													</view>
													<view class="dis3-ib" v-if="itemIndex != row.node.length - 1">
													</view>
												</view>
											</view>
										</view>
										<view class="pl">
											<view class="plpd" v-for="item in row.node">
												<view>
													<text v-if="item.ApprovalContent"
														:class="'ac-' + item.Approve">{{item.Approver}}:</text>
													<text v-if="item.ApprovalContent"
														:class="'ac-' + item.Approve">"{{item.ApprovalContent}}"</text>
												</view>

												<view class="piccontent" v-if="item.Imgs">
													<view class="van-uploader">
														<view class="van-uploader__wrapper x-f"
															style="flex-wrap: wrap;">
															<view class="van-uploader__preview"
																v-for="(imgItem,imgItemIndex) in (item.Imgs?item.Imgs.split(','):[])">
																<view class="van-image van-uploader__preview-image"
																	style="overflow: hidden; border-radius: 4px;width:60px;height:60px;"
																	@click="previewItemImage(item.Imgs,imgItemIndex,3)">

																	<view
																		style="border-radius: 2px;overflow: hidden;width: 40px;height: 40px;">
																		<u--image class="van-image__img" showLoading
																			width="40" height="40"
																			style="margin-right: 4px;object-fit: cover;"
																			:src="processImageUrl(imgItem)">
																			<template v-slot:loading>
																				<u-loading-icon
																					color="#51d0d0"></u-loading-icon>
																			</template>
																		</u--image>
																	</view>

																</view>
															</view>
														</view>
													</view>
												</view>

											</view>
										</view>
									</view>
								</view>
							</view>

						</view>
					</view>

				</view>
			</view>
		</view>

		<u-empty v-else mode="data" text="暂无数据" icon="/static/image/Img/history.png" width="40vw" height="50vh"
			textSize="28rpx">
		</u-empty>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				BaseScreenParm: {},
				personList: [],
				approvalList: [],
				finalResult: 0,
				isEmpty: false,
			};
		},
		created() {
			let that = this;
			this.BaseScreenParm = uni.$m.utils.deepClone(this.$store.state.BaseScreenParm);

			setTimeout(function() {
				that.getCkUserList();
			}, 200)
		},
		methods: {
			processImageUrl(url) { // 处理图片链接地址
				if (uni.$m.utils.isEmpty(url)) '';
				url = url.trim();

				function urlRegular(value) {
					return /^((https|http|ftp|rtsp|mms):\/\/)/
						.test(value)
				}

				let isHttp = urlRegular(url);
				if (isHttp) {
					return url;
				} else {
					return this.Request.IPAgreement() + this.Request.serverIP() + url;
				}

			},
			getCkUserList() {
				let that = this;
				this.Request.request('getCkUserList', {}, function(res) {
					that.personList = res.data.ds;

					that.initPageData();
				})
			},

			post(sql, param, callBack) {
				param["sql"] = sql;
				if (vm.Request.getUserInfo()) {
					if (!param.hasOwnProperty("P_UserID")) {
						param.P_UserID = vm.Request.getUserInfo().UserID;
					}
					if (!param.hasOwnProperty("P_UserName")) {
						param.P_UserName = vm.Request.getUserInfo().UserName;
					}
					if (!param.hasOwnProperty("P_UserCode")) {
						param.P_UserCode = vm.Request.getUserInfo().UserCode;
					}
				}
				vm.Request.requestByUrl("/SQLData/QuerySql", param, function(data) {
					callBack(data);
				}, function(err) {
					console.log(err)
				});
			},

			showMore: function(row) {
				var that = this;
				if (row.showMore) {
					that.$set(row, 'showMore', false);
				} else {
					that.$set(row, 'showMore', true);
				}

			},
			previewItemImage: function(imgs, index) { // 预览
				var that = this;
				var array = imgs.split(',');
				let newImgArr = array.map(item => {
					return that.processImageUrl(item)
				})

				// this.$emit('openPreview', newImgArr, index)
				plus.nativeUI.previewImage(newImgArr, {
					current: index,
					loop: true,
					onLongPress: function(e) { // 预览界面长按显示ActionSheet
						plus.nativeUI.actionSheet({
							cancel: "取消",
							buttons: [{
								title: "保存到手机"
							}]
						}, function(event) {
							if (event.index > 0) {
								that.saveImgToLocal(e.url);
							}
						});
					}
				});

			},
			saveImgToLocal(url) {
				uni.downloadFile({
					url,
					success: (res) => {
						if (res.statusCode === 200) {
							console.log(res.tempFilePath);

							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath, // 图片文件路径
								success: function() {
									plus.nativeUI.toast("已保存到相册", {
										icon: '/uni_modules/mc-ui/static/image/success.png'
									});
									uni.removeSavedFile({
										filePath: res.tempFilePath,
										complete: function(ret) {
											console.log(ret);
										}
									});
								},
								fail: function(error) {
									plus.nativeUI.toast("图片保存失败，请检查权限");
									uni.removeSavedFile({
										filePath: res.tempFilePath,
										complete: function(ret) {
											console.log(ret);
										}
									});
								}
							});

						}
					}
				})
			},
			filterPersonList: function(str, value) {
				var that = this;
				var row = null;
				for (var i in that.personList) {
					if (that.personList[i][str] == value) {
						row = that.personList[i];
						break;
					}
				}
				return row;
			},
			getApprovalTagImg: function(row) {
				var that = this;
				if (row.node.length == 1) {
					if (row.node[0].Approve == 0) {
						return '/uni_modules/mc-ui/static/image/doing.png';
					} else if (row.node[0].Approve == 1) {
						return '/uni_modules/mc-ui/static/image/success.png';
					} else if (row.node[0].Approve == 2) {
						return '/uni_modules/mc-ui/static/image/fail.png';
					}
				} else {

					var imgstr = '';
					var z = 0;
					for (var i in row.node) {
						if (row.node[i].Approve == 1) {
							z++;
						}
						if (row.node[i].Approve == 2) {
							imgstr = '/uni_modules/mc-ui/static/image/fail.png';
							break;
						}
					}
					if (imgstr) {
						return imgstr;
					} else {
						if (z == 0) {
							imgstr = '/uni_modules/mc-ui/static/image/doing.png'
						} else {
							if (row.node.length == z) {
								imgstr = '/uni_modules/mc-ui/static/image/success.png'
							} else {
								imgstr = '/uni_modules/mc-ui/static/image/doing.png';
							}
						}

					}
					return imgstr;
				}
			},
			getApprovalText: function(row) {
				var that = this;
				if (row.type == 1) {
					if (row.node[0].Approve == 0) {
						return '未抄送';
					} else {
						return '已抄送';
					}
				} else {
					if (row.node.length == 1) {
						if (row.node[0].Approve == 0) {
							return '审批中';
						} else if (row.node[0].Approve == 1) {
							return '已同意';
						} else if (row.node[0].Approve == 2) {
							return '已拒绝';
						}
					} else {
						var str = '';
						var z = 0;
						for (var i in row.node) {
							if (row.node[i].Approve == 1) {
								z++;
							}
							if (row.node[i].Approve == 2) {
								str = '已拒绝';
								break;
							}
						}
						if (str) {
							return str;
						} else {
							if (z == 0) {
								str = '审批中'
							} else {
								if (row.node.length == z) {
									str = '已同意'
								} else {
									str = z + '人同意';
								}
							}

						}
						return str;
					}
				}
			},
			cutStr: function(str) {
				var that = this;
				return str && str.substring(str.length - 2);
			},
			checkIsSingle: function(row) {
				var that = this;
				var x = true;
				for (var i in row.node) {
					if (row.node[i].CurrentApprovalIDs.length > 1) {
						x = false;
					}
				}
				return x;
			},
			initPageData: function(id) {
				var that = this;
				var obj2 = {

					P_PKValue: this.BaseScreenParm.keyValue,
					P_TableName: this.BaseScreenParm.globalData.physicalTableName
				}
				this.Request.request('Select_FlowLog1', obj2, function(res) {

					if (res.data.ds.length) {


						if (res.data.ds[res.data.ds.length - 1].Approve == 1) {
							that.finalResult = 1;
						}

						var data = [];
						for (var i in res.data.ds) {

							res.data.ds[i].CurrentApprovalIDs = res.data.ds[i].CurrentApprovalIDs.replace(
								/^,+/,
								"").replace(
								/,+$/, "").split(',');

							for (var c in res.data.ds[i].CurrentApprovalIDs) {
								var row = that.filterPersonList('UserID', res.data.ds[i].CurrentApprovalIDs[
									c]);
								if (row) {
									res.data.ds[i].CurrentApprovalIDs[c] = row.EmplName;
									// res.data.ds[i].CurrentApprovalIDs[c] = row.UserName;
								}

							}

							if (data.indexOf(res.data.ds[i].AuditID) == -1) {
								data.push(res.data.ds[i].AuditID);
							}
						}

						var approvalList = [];
						for (var n in data) {
							var approvalNodeList = [];
							var level = 0;
							var finLevel = 0;
							for (var i in res.data.ds) {
								if (data[n] == res.data.ds[i].AuditID) {

									if (res.data.ds[i].Approve == 0 && !level) {
										level = res.data.ds[i].ApprovalSort;
									}

									if (res.data.ds[i].Approve == 1 && i == res.data.ds.length - 1) {
										level = res.data.ds[i].ApprovalSort;
									}

									if (res.data.ds[i].Approve == 2 && !finLevel) {
										finLevel = res.data.ds[i].ApprovalSort;
									}


									if (res.data.ds[i].Approve == 2 && n == data.length - 1) {
										that.finalResult = 2;
									}



									var x = 0;
									for (var j in approvalNodeList) {
										if (approvalNodeList[j].index == res.data.ds[i].ApprovalSort) {
											x = 1;
											approvalNodeList[j].node.push(res.data.ds[i]);
										}
									}
									if (!x) {
										approvalNodeList.push({
											index: res.data.ds[i].ApprovalSort,
											type: res.data.ds[i].FlowType,
											department: res.data.ds[i].ApprovalName,
											node: [res.data.ds[i]]
										})
									}
								}
							}
							approvalList.push({
								level: finLevel ? (finLevel - 1) : (level - 1),
								approvalNodeList: approvalNodeList
							})
						};
						that.approvalList = approvalList;
						that.isEmpty = false;
					} else {

						that.isEmpty = true;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.m-approveList {
		height: 100%;
	}

	.BtnBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100px;
		position: fixed;
		top: 50%;
		left: 0%;
		width: 100%;
		opacity: 0.7;
	}


	.part {
		padding: 15px 15px 0 15px;
	}

	.part .pf {
		border-radius: 6px;
		box-shadow: 0px 1px 5px rgb(200, 198, 198);
		background-color: #fff;
		overflow: hidden;
	}

	.textarea {
		display: block;
	}

	.label {
		padding: 10px 16px;
	}

	.ap-f {
		border-bottom: 1px solid #f7f7f7;
	}

	.f-r {
		/* padding: 17px 0; */
	}

	.mark {
		padding: 17px 15px;
	}

	.mark1 {
		padding: 17px 5px 17px 15px;
		position: relative;
	}

	.f-sub {
		color: #969799;
		font-size: 13px;
		margin-top: 4px;
	}

	.line {
		position: relative;
		width: 30px;
	}

	.line1 {
		width: 60px;
	}

	.line-sq {
		display: inline-block;
		width: 11px;
		height: 11px;
		border-radius: 6px;
		background: #d6d6d6;
		position: absolute;
		left: 0;
		top: 12px;
	}

	.line-li {
		display: inline-block;
		width: 1px;
		background: #d6d6d6;
		position: absolute;
		left: 5px;
		top: -17px;
		bottom: -17px;
	}

	.line-li1 {
		display: inline-block;
		background: #d6d6d6;
		position: absolute;
		top: 52px;
		left: 35px;
		width: 3px;
		bottom: 10px;
	}

	.pd {
		padding: 16px 0;
	}

	.ap-r {
		text-align: right;
		padding-right: 10px;
		/* margin: -8px 0; */
		padding-top: 10px;
	}

	.ap-d {
		text-align: right;
		padding-right: 10px;
		color: #ccccce;
		font-size: 13px;
		float: right;
		padding-top: 3px;
	}

	.img {
		width: 34px;
		height: 34px;
		line-height: 34px;
		text-align: center;
		font-size: 12px;
		color: #fff;
		background-color: #3396fb;
		border-radius: 6px;
		margin: 0 auto;
		position: relative;
		user-select: none;
	}

	.img1 {
		width: 44px;
		height: 44px;
		line-height: 44px;
		text-align: center;
		font-size: 13px;
		color: #fff;
		background-color: #3396fb;
		border-radius: 6px;
		position: relative;
		user-select: none;
	}

	.dis-ib {
		display: inline-block;
		vertical-align: middle;
		text-align: center;
		min-width: 40px;
	}

	.dis2-ib {
		display: inline-block;
		vertical-align: middle;
		padding-bottom: 3px;
		text-align: center;
	}

	.dis3-ib {
		display: inline-block;
		margin: 0 6px;
		color: #969799;
		vertical-align: top;
		padding-top: 7px;
		text-align: center;
	}

	.ap-n {
		padding-top: 2px;
		font-size: 13px;
		color: #969799;
		text-align: center;
	}

	.bottom {
		padding: 8px 15px;
	}

	.part-white {
		padding: 15px;
		background-color: #fff;
		position: relative;
	}

	.title {
		line-height: 40px;
		font-size: 18px;
	}

	.title-sub {
		color: #aaacac;
		font-size: 13px;
	}

	.ap-res {
		color: #a3a3a3;
		font-size: 15px;
		padding-top: 6px;
	}

	.ap-res1 {
		color: #c31616;
		font-size: 15px;
		padding-top: 6px;
	}

	.ap-img {
		position: absolute;
		right: 20px;
		bottom: -38px;
		width: 88px;
		opacity: 0.4;
	}

	.form-row {
		padding: 4px 16px;
	}

	.form-label {
		color: #808991;
		font-size: 13px;
		user-select: none;
	}

	.form-content {
		padding-top: 5px;
	}

	.npd {
		padding-top: 0;
		overflow-x: auto;
	}

	.pl {
		color: #969799;
		font-size: 16px;
		margin: 6px 2px 18px 0;
		min-height: 25px;
		border-bottom: 1px solid #ebedf0;
	}

	.sf {
		width: 16px;
		background: #fff;
		padding: 2px;
		border-radius: 8px;
		position: absolute;
		right: -5px;
		bottom: -2px;
	}

	.select {
		color: #3396fb;
		float: right;
		font-size: 13px;
		padding-top: 3px;
		vertical-align: middle;
	}

	.select a {
		vertical-align: middle;
	}

	.select image {
		width: 16px;
		vertical-align: middle;
	}

	.hq {
		padding: 10px 10px 0 0;
	}

	.wh {

		white-space: nowrap;
		overflow-x: auto;
		padding-right: 10px;
	}

	.plpd {
		padding-bottom: 5px;
	}

	.pictitle {
		line-height: 24px;
		color: #646566;
		user-select: none;
	}

	.piccontent {
		padding-top: 10px;
		overflow: hidden;
	}

	.van-uploader__preview {
		margin-right: 15px;
	}

	.no {
		text-align: center;
		color: #808991;
		font-size: 14px;
	}

	.li1 {
		top: 15px;
	}

	.li2 {
		bottom: 24px;
	}

	.da-c {
		color: #c31616;
	}

	.danger .van-field__control {
		color: #c31616;
	}

	.danger .van-field__label {
		color: #808991;
	}

	.ac-1 {
		color: #03b553;
	}

	.ac-2 {
		color: #c31616;
	}

	.checkbox {
		padding: 25px 5px 10px 10px;
	}

	.jl-remark {
		padding: 5px 0;
		color: #3396fb;
	}

	.memo-l {
		border-bottom: 1px solid rgb(235, 237, 240);
		padding: 4px 0;
	}

	.memo-l:last-child {
		border-bottom: 0;
	}


	* {
		box-sizing: border-box;
	}

	[v-cloak] {
		display: none !important;
	}

	.o-y-a {
		overflow-y: auto;
	}

	image {
		vertical-align: middle;
	}


	/* flex相关 */
	.flex-box {
		display: -webkit-flex;
		display: flex;
	}

	.flex-direction-c {
		flex-direction: column;
	}

	.flex-direction-r {
		flex-direction: row;
	}

	.flex-main {
		flex: 1;
	}
</style>